<!-- pages/search/result.vue -->
<template>
  <tm-app>
    <!-- 搜索框 -->

    <!-- 搜索结果列表 -->
    <view class="result-list">
      <tm-sheet 
        v-for="song in songs" 
        :key="song.musicId"
        :margin="[24, 12]"
        :round="3"
        @click="playSongs(song)"
      >
        <view class="song-item">
          <!-- 封面 -->
          <tm-image 
            :src="song.imageUrlUrl" 
            :width="120" 
            :height="120" 
            :round="2"
          />

          <!-- 歌曲信息 -->
          <view class="song-info">
            <tm-text 
              :label="song.title" 
              :font-size="32" 
              :lines="1"
              class="song-title"
            />
            <tm-text 
              :label="`${song.artistVo.artistName} - ${song.categoryVo.categoryName}`" 
              color="grey" 
              :font-size="26"
              :lines="1"
              class="mt-8"
            />
          </view>

          <!-- 时长 -->
          <tm-text 
            :label="computedDuration(song.duration)" 
            color="grey" 
            :font-size="28"
            class="duration"
          />
        </view>
      </tm-sheet>
    </view>

    <!-- 空状态 -->
    <tm-text v-if="songs.length === 0">暂无搜索结果</tm-text>
  </tm-app>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import {searchSongs} from '@/api/index'
import moment from 'moment'
import {playSongs} from '@/common/index'
const songs = ref([])
// 搜索请求
const computedDuration = (duration) => {
    let time = moment.duration(duration,'seconds')
    return `${time.minutes()}:${time.seconds()}`
}
const doSearch = (keyword) => {
  uni.showLoading({ title: '搜索中...' })
  searchSongs(keyword).then(({data}) => {
    console.log(data)
    songs.value = data.data
  })
  setTimeout(() => {
    uni.hideLoading()
  }, 500)
}

onLoad((option) => {
  doSearch(option.keyword)
})

// 播放歌曲
const playSong = (song) => {
  uni.showToast({
    title: `播放: ${song.name}`,
    icon: 'none'
  })
}
</script>

<style lang="scss" scoped>
.result-list {
  padding: 20rpx 0;
}

.song-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  
  .song-info {
    flex: 1;
    margin-left: 24rpx;
    min-width: 0;
    
    .song-title {
      font-weight: 500;
    }
  }

  .duration {
    margin-left: 24rpx;
  }
}

.mt-8 {
  margin-top: 8rpx;
}
</style>
